<template>
    <div :class="[typeClass,center ?'is-center':'']" v-show="visible" >
      <Icon :type="iconClass" :size="isBigIcon"  v-if="showIcon"></Icon>
      <div :class="content" >
        <span :class="[titleClass,isBoldTitle]" v-if="title">{{ title }}</span>
        <slot>
          <p :class="[descriptionClass]" v-if="description">{{ description }}</p>
        </slot>
        <i :class="[closeClass, isCustomer, closeIcon]" v-show="closable" @click="close()">{{closeText}}</i>
      </div>
    </div>
</template>
<script>
import Icon from '../../icon/src/Icon'
const prefixCls = 'sh-alert'
export default {
  name: 'Alert',
  data () {
    return {
      visible: true,
      ICON_CLASSES_MAP: {
        'info': 'icon-info',
        'warning': 'icon-warning',
        'success': 'icon-success',
        'error': 'icon-error'
      }
    }
  },
  components: {
    Icon
  },
  props: {
    // 接收标题
    title: {
      type: String,
      default: ''
    },
    // 辅助性文字
    description: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'info'
    },
    // 关闭按钮显示
    closable: {
      type: Boolean,
      default: true
    },
    // 关闭按钮自定义文字
    closeText: {
      type: String,
      default: ''
    },
    // 是否显示icom
    showIcon: Boolean,
    // 内容是否居中
    center: Boolean
  },
  computed: {
    // alert的样式
    typeClass () {
      return [
        `${prefixCls}`,
        `${prefixCls}-${this.type}`,
        {
        }
      ]
    },
    content () {
      return [`${prefixCls}__content`]
    },
    titleClass () {
      return [`${prefixCls}__title`]
    },
    descriptionClass () {
      return [`${prefixCls}__description`]
    },
    closeClass () {
      return [`${prefixCls}__closebtn`]
    },
    closeIcon () {
      return this.closeText === '' ? 'iconfont icon-close' : ''
    },
    isCustomer () {
      return this.closeText !== ''
    },
    // alert里icon的样式
    iconClass () {
      return this.ICON_CLASSES_MAP[this.type] || 'icon-info'
    },
    // 如果传入了title（辅助性文字）或者 传入了匿名插槽 则显示大icon
    isBigIcon () {
      return this.title || this.$slots.default ? '28' : ''
    },
    isBoldTitle () {
      return this.description || this.$slots.default ? 'is-bold' : ''
    }
  },
  methods: {
    // 关闭alert方法
    close () {
      // v-show隐藏alert
      this.visible = false
      // 向父组件暴露close方法
      this.$emit('close')
    }
  }
}
</script>
